.calendarHeader {
  --dch-control-size-xs: 30px;
  --dch-control-size-sm: 36px;
  --dch-control-size-md: 42px;
  --dch-control-size-lg: 48px;
  --dch-control-size-xl: 54px;
  --dch-control-size: var(--dch-control-size-sm);

  display: flex;
  max-width: calc(var(--dch-control-size) * 8 + rem(7px));
  margin-bottom: var(--mantine-spacing-xs);
}

.calendarHeaderLevel,
.calendarHeaderControl {
  height: var(--dch-control-size);
  border-radius: var(--mantine-radius-default);
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  opacity: 1;
  cursor: pointer;

  &:where([data-static]) {
    cursor: default;
  }

  @mixin hover {
    &:where(:not([data-disabled], [data-static], :disabled)) {
      @mixin light {
        background-color: var(--mantine-color-gray-0);
      }

      @mixin dark {
        background-color: var(--mantine-color-dark-5);
      }
    }
  }

  &:where(:disabled, [data-disabled]) {
    opacity: 0.2;
    cursor: not-allowed;
  }
}

.calendarHeaderControl {
  width: var(--dch-control-size);
}

.calendarHeaderLevel {
  flex: 1;
  font-size: var(--dch-fz, var(--mantine-font-size-sm));
  font-weight: 500;
  text-transform: capitalize;
}

.calendarHeaderControlIcon {
  width: 60%;
  height: 60%;

  &:where([data-direction='next']) {
    transform: rotate(270deg);

    @mixin where-rtl {
      transform: rotate(90deg);
    }
  }

  &:where([data-direction='previous']) {
    transform: rotate(90deg);

    @mixin where-rtl {
      transform: rotate(270deg);
    }
  }
}
